<script>
APP.totalPointDepartemen = {
	action: 'proc/admin/totalPointDepartemen.php',
	periode1: null,
	periode2: null,
	
	load_graph: function (form){
		var showImage = function(){
			var img = $('graphContainer').getElement('img');
			if (img == null) return;
			if (img.complete) $('graphContainer').tween('opacity',1);	
			else showImage.delay(1000);
		}
		
		$('graphContainer').tween('opacity',0);	
		FBModal_loading("Loading...", "Generating graph", true, true);
		form.set('action',APP.totalPointDepartemen.action)
		.set('send',{
			onSuccess: function(res){
				if (res) {
					//alert(res);
					res = res.replace(/href/gi,'onclick');
					$('graphContainer').empty().set('html', res)
						.getElements('area').each(function(item){
							item.addEvent('click', function(e){ new Event(e).stop(); })
								.href="#";
						});
				}
				else{
					$('graphContainer').empty();
				}
				showImage.delay(1000);
				FBModal_hide();
			}		 
		}).send();
	},
	
	load_drillGraph: function (data){
		var proc = data.type==1? 
			"proc=graph-drill-departemen&deptID="+data.deptID+"&month="+data.month+"&year="+data.year : 
			"proc=graph-drill-all&month="+data.month+"&year="+data.year;
		FBModal_show2( APP.totalPointDepartemen.action , 'post', proc, true, true, null);
	}
}

window.addEvent('domready', function(){
	var form = $('totalPointDepartemen-form');
	//APP.totalPointDepartemen.load_graph($('totalPointDepartemen-form'));
	
	APP.totalPointDepartemen.periode1 = dtpicker_attach0(form.periode1, {timePicker:false, format: 'F-Y', 
		maxDate: { date: <?php echo time()?>, format: 'U' },
		onClose: function(){ 
			APP.totalPointDepartemen.periode2.options.minDate = {date:APP.totalPointDepartemen.periode1.attachTo.value, format:'U'};
			APP.totalPointDepartemen.periode2.formatMinMaxDates();
			APP.totalPointDepartemen.load_graph(form);
		}
	});
	APP.totalPointDepartemen.periode2 = dtpicker_attach0(form.periode2, {maxDate:{ date: <?php echo time()?>, format: 'U' }, 
		timePicker:false, format: 'F-Y', onClose: function(){ APP.totalPointDepartemen.load_graph(form); } 
	});
});
</script>
<form id="totalPointDepartemen-form" name="totalPointDepartemen-form" method="post">
<input type="hidden" name="proc" value="graph" />
<table width="100%" border="0">
<tr>
    <td width="100" align="right" valign="top">Departemen : </td>
	<td>
		<table width="100%" border="0" cellpadding="5" cellspacing="0" style="border:1px solid #3366CC;" bgcolor="#FFFFFF">
		<?php $DEP = departemen_select(false, "NAMA_DEPARTMENT ASC"); $row=true; ?>
		<?php while ($row):?>
		<tr <?php echo tag_zebra($z++)?>>
			<?php for($i=0; $i<3; $i++): ?>
			<?php if ($row = mysql_fetch_assoc($DEP)) : ?>
			<td>
			<input name="departemenID" type="radio" value="<?php echo$row['ID_DEPARTMENT']?>" onChange="APP.totalPointDepartemen.load_graph($(this).getParent('form'))"/>
			<span class="marginL5"><?php echo $row['NAMA_DEPARTMENT']?></span>
			</td>
			<?php else: ?><td></td>
			<?php endif;?>
			<?php endfor;?>
		</tr>
		<?php endwhile; ?>
		</table>
	</td>
</tr>
<tr>
    <td align="right">Periode : </td>
    <td><input type="text" name="periode1" value="<?php echo time()?>" /> - <input name="periode2" type="text" value="<?php echo time()?>" /></td>
</tr>
</table>
</form>